import { ComponentProps, Computed, Hook, Mut, VueComponent } from "vue3-oop"
import { Card } from 'ant-design-vue';
import { ExpandOutlined,LeftOutlined,RightOutlined,CloseOutlined,PlusSquareOutlined } from '@ant-design/icons-vue'
import { nanoid } from "nanoid";

import moduleCss from './fdn-card.module.scss'
import { FormData, WidgetItem, WidgetNode, ReserveItem } from '../../types/index'

import { newATTR, LAYOUT, GRID, CARD } from '../attr-widget'
import FdnGrid from "../_grid/fdn-grid";

interface IProps {
  formData: FormData,
  widgetNode: WidgetNode
}
export default class FdnCard extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  @Mut() state = {
    tabKey: '',
    tabIndex: 0
  }

  render() {
    const { formData,widgetNode } = this.props;
    const widgetItem = widgetNode.widgetItem;
    const attr = widgetItem[widgetItem.type] as CARD;

    const gridNode = widgetNode.children[this.state.tabIndex];
    const isActive = gridNode.isSelected();
    const activeClass = isActive ? 'active' : undefined;

    if(this.state.tabKey===''&&attr.tabList.length>0){
      this.state.tabKey = attr.tabList[0].key;
    }

    return (
      <Card 
        title= {attr.showTitle?attr.title:undefined}
        tabList= {attr.showTab?[...attr.tabList,{key:'TAB_ADD',tab:'新分页'}]:undefined}
        activeTabKey= {this.state.tabKey}
        onTabChange={(tab)=>{
          if(tab==='TAB_ADD'){
            const newIndex = attr.tabList.length;
            attr.tabList.push({key:`tab_${nanoid()}`,tab:`分页${newIndex+1}`});
            formData.createNewWidgetNode(widgetNode,{type:'GRID',label:'栅格'},newIndex);
            this.state.tabKey = attr.tabList[newIndex].key;
            this.state.tabIndex = newIndex;
          }else{
            this.state.tabKey = tab;
            attr.tabList.forEach((item,index)=>{if(item.key===tab){this.state.tabIndex=index}})
          }
        }}
        class={[moduleCss['fdn-card']]}
      >
        {{
          default:()=>(
            <div
              class={[moduleCss['card-grid'],activeClass]}
              onClick={(event:MouseEvent)=>{
                event.stopPropagation();
                gridNode.setSelected();
              }}
            >
              <FdnGrid
                formData={formData}
                widgetNode={gridNode}
              />
              {isActive&&
              <div class={[moduleCss['card-grid-tool']]}>
                {/* 选择外层组件 */}
                <ExpandOutlined
                  onClick={(event:MouseEvent)=>{
                    event.stopPropagation();
                    gridNode.setParentSelected();
                  }}
                />
                {/* 前移一位 */}
                <LeftOutlined 
                  onClick={(event:MouseEvent)=>{
                    event.stopPropagation();
                    if(this.state.tabIndex>0){
                      let tmp = attr.tabList[this.state.tabIndex-1];
                      attr.tabList[this.state.tabIndex-1] = attr.tabList[this.state.tabIndex];
                      attr.tabList[this.state.tabIndex] = tmp;
                      this.state.tabIndex = this.state.tabIndex-1;
                      this.state.tabKey = attr.tabList[this.state.tabIndex].key;
                    }
                    gridNode.moveFoward();
                  }} 
                />
                {/* 后移一位 */}
                <RightOutlined 
                  onClick={(event:MouseEvent)=>{
                    event.stopPropagation();
                    if(this.state.tabIndex<attr.tabList.length-1){
                      let tmp = attr.tabList[this.state.tabIndex+1];
                      attr.tabList[this.state.tabIndex+1] = attr.tabList[this.state.tabIndex];
                      attr.tabList[this.state.tabIndex] = tmp;
                      this.state.tabIndex = this.state.tabIndex+1;
                      this.state.tabKey = attr.tabList[this.state.tabIndex].key;
                    }
                    gridNode.moveBackwards();
                  }}
                />
                {/* 删除组件 */}
                { attr.tabList.length>1 && <CloseOutlined 
                  onClick={(event:MouseEvent)=>{
                    event.stopPropagation();
                    if(attr.tabList.length>1){
                      attr.tabList.splice(this.state.tabIndex,1);
                      gridNode.remove();
                      this.state.tabIndex=0;
                      this.state.tabKey=attr.tabList[0].key;
                    }
                  }}
                />}
              </div>
              }
            </div>
          ),
          customTab:(item:any)=>{
            if(item.key==='TAB_ADD'){
              return <PlusSquareOutlined />
            }
          }
        }}
      </Card>
    )
  }
}